<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
    .box1,.box2
    {
        width: 200px;
        height: 200px;
    }
    /*
    垂直外边距的重叠（折叠）
    相邻的垂直方向外边距会发生重叠现象
    兄弟元素
    兄弟元素之间的相邻垂直外边距会取两者之间的较大值（两者都是正值）
    特殊情况：如果相邻的外边距一正一负，则取两者的和
    如果相邻的外边距都是负值，则取两者中绝对值较大的
    兄弟元素之间的外边距的重叠，对于开发时有利的，所以我们不需要进行处理
    
    父子元素
    父子元素之间的相邻外边距，子元素会传递给父元素（上外边距）
    父子外边距的折叠会影响到页面的布局，必须要进行处理
    方法一：通过修改padding和height来使得子元素下降
    方法二：使这两个box不相邻，也就是给box3增加一个border-top:1px（但是仔细上查看会发现偏差，所以下降距离也需要计算）
    方法三：开启绝对定位，这样不管子元素怎么移动，父元素都不会被影响
    */
    .box1
    {
        background-color: red;
        /*设置一个下外边距*/
        margin-bottom: 100px;
    }
    .box2
    {
        margin-top: 100px;
        /*设置一个上外边距*/
        background-color: blue;
    }
    .box3
    {
        width: 200px;
        height: 200px;
        background-color: red;
        position: absolute;
    }
    .box4
    {
        width: 100px;
        height: 100px;
        background-color: orange;
        margin-top: 100px;
    }
    </style>
</head>
<body>
    <div class="box3">
        <div class="box4"></div>
    </div>
    <!--
    <div class="box1"></div>
    <div class="box2"></div>
    -->
</body>
</html>